<template>
  <t-modal
    :title="operateType == 1 ? '新增视口' : '编辑视口'"
    :width="900"
    :visible="visible"
    wrapClassName="add-btm-viewport-modal"
    @cancel="handleCancel()"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- 视口名称 -->
      <a-form-model-item ref="name" label="视口名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入视口名称" />
      </a-form-model-item>
      <!-- 视口描述 -->
      <a-form-model-item ref="desc" label="视口描述" prop="desc">
        <a-input
          v-model="form.desc"
          type="textarea"
          placeholder="请输入视口描述"
        />
      </a-form-model-item>
      <!-- 默认视口 -->
      <a-form-model-item ref="defaultData" label="默认视口" prop="defaultData">
        <a-radio-group v-model="form.defaultData">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <!-- 视口快照 -->
      <a-form-model-item ref="snapshot" label="视口快照" prop="snapshot">
        <div class="snapshot-container">
          <img :src="snapshot" v-if="snapshot" />
        </div>
      </a-form-model-item>
    </a-form-model>

    <template slot="footer">
      <a-button @click="handleCancel()">取消</a-button>
      <a-button type="primary" @click="handleOk()" :loading="submitLoading">
        确定
      </a-button>
    </template>
  </t-modal>
</template>
<script>
//新增视口【弹窗】
import { axios } from "@/utils/request";
export default {
  inject: ["currentProject", "sceneSource"],
  props: {
    operateType: {
      type: Number,
      default: 1,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    viewportData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          if (this.operateType == 1) {
            this.getViewportSnapshot();
          } else {
            let {
              viewportImage,
              viewportDesc,
              viewportName,
            } = this.viewportData;
            this.snapshot = viewportImage;
            this.form.name = viewportName;
            this.form.desc = viewportDesc;
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      submitLoading: false,
      snapshot: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        name: "",
        desc: "",
        snapshot: "",
        defaultData: 1,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入视口名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //获取视口快照
    getViewportSnapshot() {
      const canvas = document.getElementById("blackHoleCanvas");
      if (canvas) {
        const context = canvas.getContext("2d");
        const dataUrl = canvas.toDataURL();
        this.snapshot = dataUrl;
      }
    },

    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          let { name, desc, defaultData } = this.form;
          let { snapshot, operateType } = this;
          let { orgCode, foreignUuid } = this.currentProject();
          let { sceneId } = this.sceneSource();
          let { camDir, camPos, camRotate } = BlackHole3D.Camera.getCamLocate();
          let apiUrl = "";
          if (operateType == 1) {
            //新增
            apiUrl = "/probusiness/bimViewport/save";
          } else {
            //编辑
            apiUrl = "/probusiness/bimViewport/update";
          }
          axios
            .post(
              apiUrl,
              {
                uuid: this.viewportData.uuid,
                sceneId,
                proCode: orgCode,
                viewportName: name,
                projid: foreignUuid,
                viewportImage: snapshot,
                viewportDesc: desc,
                defaultData,
                camDir:
                  operateType == 1
                    ? JSON.stringify(camDir)
                    : this.viewportData?.camDir ?? "[]",
                camPos:
                  operateType == 1
                    ? JSON.stringify(camPos)
                    : this.viewportData?.camPos ?? "[]",
                camRotate:
                  operateType == 1
                    ? JSON.stringify(camRotate)
                    : this.viewportData?.camRotate ?? "[]",
              },
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              let { statusCode } = res;
              if (statusCode == 200) {
                this.$message.success(
                  `${operateType == 1 ? "新增" : "编辑"}成功！`
                );
                this.$parent.getData();
                this.handleCancel();
              } else {
                this.$message.error(
                  `${operateType == 1 ? "新增" : "编辑"}失败，请稍后重试！`
                );
              }
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    handleCancel() {
      this.snapshot = "";
      this.form.name = "";
      this.form.desc = "";
      this.$refs.ruleForm.resetFields();
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.add-btm-viewport-modal {
  .snapshot-container {
    width: 652px;
    height: 366px;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>
